<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>账号设置-绑定手机 - EasyBlog博客</title>
    <th:block th:replace="~{ fragment/common::common_head}" />
</head>
<body>

<!--导航-->
<div th:replace="~{fragment/nav :: navbar}"></div>


<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
        <div class="one wide column"></div>
        <!--左侧菜单栏-->
        <div th:replace="~{ fragment/account-setting-sidebar::sidebar}"></div>
        <!--博客内容-->
        <div class="twelve wide column">
            <div class="ui top attached segment stackable">
                <h3 class="m-margin-top m-margin-bottom m-margin-left"
                    style="font-size: 20px !important;color: #3d3d3d !important;">
                    绑定手机</h3>
                <div class="ui divider"></div>
                <div class="m-margin-left-large">
                    <div class="ui stackable grid">
                        <div class="row">
                            <div class="ui fluid input" style="width: 60% !important;margin-top: 30px !important;">
                                <span class="m-margin-top">填 写 手 机  :&nbsp;</span>
                                <input id="phone" name="phone" type="text">
                            </div>
                        </div>
                        <div class="row">
                            <div class="ui action  fluid input"
                                 style="width: 60% !important;margin-top: 20px !important;">
                                <span class="m-margin-top">填写验证码：</span>
                                <input  id="code" name="code" type="text">
                                <button id="getCode_btn" class="ui blue mini button">获取验证码</button>
                            </div>
                        </div>
                        <div class="row">
                            <button id="firm_btn" class="ui red medium disabled button m-margin-left-middle">
                                立即绑定
                            </button>
                        </div>
                    </div>
                </div>
                <div style="height: 10em"></div>
            </div>
        </div>
    </div>
</div>
<div class="ui small modal">
    <div class="header" id="msg_header">删除</div>
    <div id="msg" class="content">
    </div>
    <div class="actions">
        <div id="msg-btn" class="ui red button">知道了</div>
    </div>
</div>
<div style="height: 20em"></div>
<!--底部footer-->
<div th:replace="~{ fragment/common :: footbar}"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../../static/js/easyblog.js" th:src="@{/static/js/easyblog.js}"></script>
<!--控制头像的显示-->
<script type="text/javascript">
    $(document).ready(function () {
        let userId=$('#userId').val();
        showPageZoomWarning();
        toggleStatus();
        logOut();
    });
</script>
<!--初始化操作-->
<script type="text/javascript">
    $('#msg-btn').click(function () {
        $('.ui.modal').modal('hide');
    });

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    $('#searchBar').click(function () {
        $('#reloadSearchBar').css("display", "block");  //显示div
    });
    $('#account2').css("background", '#ca0c16');
    $('#account2').css('color', '#ffffff');
</script>
<!--获取短信验证码-->
<script type="text/javascript" th:online="javascript">
    let userId="[[${user.getUserId()}]]";
    $('#getCode_btn').click(function () {
        let phone = $('#phone').val();
        let phone_reg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
        if (phone == null || phone == '') {
            spop({
                template: '请输入手机号',
                autoclose: 3000,
                position: "top-center",
                style: 'error',
            });
        } else if (!phone_reg.test(phone)) {
            spop({
                template: '请输入正确的手机号',
                autoclose: 3000,
                position: "top-center",
                style: 'error',
            });
        } else {
            $.ajax({
                url: "/manage/account/sendByPhone",
                method: 'GET',
                data: {phone: phone,userId:userId},
                sync: true,
                dataType: "json",
                success: function (response) {
                    if (response.success) {
                        spop({
                            template: '验证码发送成功，请注意查收！',
                            autoclose: 3000,
                            position: "top-right",
                            style: 'success',
                        });
                        //禁用按钮60s
                        disableButton60sAndDisplayCountDown($('#getCode_btn'));
                    }
                },
                error: function () {
                    spop({
                        template: '服务异常，请重试！',
                        autoclose: 3000,
                        position: "top-center",
                        style: 'error',
                    });
                }
            })
        }
    });

    $('#firm_btn').click(function () {
        var code = $('#code').val();
        var phone = $('#phone').val();
        $.ajax({
            url: "/manage/account/bindPhone",
            method: "GET",
            sync: true,
            data: {phone:phone,code: code,userId:userId},
            dataType: "json",
            success: function (response) {
                if (response.success) {
                    spop({
                        template: response.message,
                        autoclose: 3000,
                        position: "top-left",
                        style: 'success',
                    });
                    setTimeout('window.location.href = "/manage/account/reset/phone/"',3000);
                } else {
                    spop({
                        template: response.msg,
                        autoclose: 3000,
                        position: "top-center",
                        style: 'error',
                    });
                }
            },
            error: function () {
                spop({
                    template: '服务异常，请重试！',
                    autoclose: 3000,
                    position: "top-center",
                    style: 'error',
                });
            }
        })
    });
</script>
<!--控制按钮的禁用和可用状态-->
<script type="text/javascript">
    $(function () {
        function changePwd() {
            var len = document.getElementById("code").value.length;
            if (len > 4) {
                $('#firm_btn').removeClass("disabled");
                $('#firm_btn').css("background-color", "#ca0c16");
                $('#firm_btn').css("color", "#ffffff");
            } else {
                $('#firm_btn').addClass("disabled");
                $('#firm_btn').css("background-color", "#E0E1E2");
                $('#firm_btn').css("color", "#000000");
            }
        }
        setInterval(changePwd, 300);
    });
</script>
</html>